<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue源码学习</title>
    <style>
        div{
            margin: 10px 0;
        }
        .ipt{
            margin-top: 15px;
        }
    </style>
    <script src="./myVue/utils.js"></script>
</head>
<body>
    <div id="app">
        <div>message: {{ message }}</div>
        <div v-text="text">v-text</div>
        <div v-html="html">v-html</div>
        <div>ipt: {{ipt}}</div>
        <div class="ipt">
            <input v-model="ipt"></input>
        </div>
    </div>

    <script src="./myVue/dep.js"></script>
    <script src="./myVue/watcher.js"></script>
    <script src="./myVue/compiler.js"></script>
    <script src="./myVue/observer.js"></script>
    <script src="./myVue/index.js"></script>
    <script>
        let vm
        window.onload = function () {
            vm = new Vue({
                el: '#app',
                data: {
                    message: '插值',
                    text: '文本',
                    obj: {
                        a: 'a值',
                        b: 'b值'
                    },
                    ipt: 'input',
                    html: 'HTML'
                },
            })
            vm.$mount()

            console.log(vm)
        }
    </script>
</body>
</html>